<template>
    <div class="app-container">
        <el-tabs type="border-card">
          <el-tab-pane label="车辆注册">
            <div>
              <el-card class="box-card">
                  <div slot="header" class="clearfix">
                      <span>车辆信息</span>
                  </div>
                  <el-form ref="carForm" :model="carForm" label-width="150px" :inline="true">
                      <el-form-item label="车牌号">
                        <el-input v-model="carForm.number"/>
                      </el-form-item>
                      <el-form-item label="车龄">
                        <el-input v-model="carForm.age"/>
                      </el-form-item>
                      <el-form-item label="车长(米)">
                        <el-input v-model="carForm.carLength" />
                      </el-form-item>
                      <el-form-item label="载重(吨)">
                        <el-input v-model="carForm.load" />
                      </el-form-item>
                      <el-form-item label="车型">
                        <el-select v-model="carForm.type" placeholder="车辆类型">
                          <el-option label="高栏货车" value="高栏货车" />
                          <el-option label="低栏货车" value="低栏货车" />
                          <el-option label="厢式货车" value="厢式货车" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="发动机号码">
                        <el-input v-model="carForm.engineNo" />
                      </el-form-item>
                      <el-form-item label="车辆所有人">
                        <el-input v-model="carForm.people" placeholder="不属于个人的车辆填写公司"/>
                      </el-form-item>
                      <el-form-item label="车辆注册日期">
                        <el-date-picker
                          v-model="carForm.creationTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        />
                      </el-form-item>
                      <el-form-item style="margin-left: 8%;">
                          <div style="float: left;margin-left: 18%;">
                              <span>车辆正面照片</span>
                              <el-upload
                                class="avatar-uploader"
                                action="#"
                                :show-file-list="false"
                                :http-request="requestUpload"
                                :before-upload="beforeAvatarUpload1">
                                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                              </el-upload>
                          </div>
                      </el-form-item>
                      <el-form-item style="margin-left: 8%;">
                          <div style="float: left;margin-left: 18%;">
                              <span>车辆反面照片</span>
                              <el-upload
                                class="avatar-uploader"
                                action="#"
                                :show-file-list="false"
                                :http-request="requestUpload"
                                :before-upload="beforeAvatarUpload2">
                                <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                              </el-upload>
                          </div>
                      </el-form-item>
                      <el-form-item style="margin-left: 8%;">
                          <div style="float: left;margin-left: 18%;">
                              <span>交强险照片</span>
                              <el-upload
                                class="avatar-uploader"
                                action="#"
                                :show-file-list="false"
                                :http-request="requestUpload"
                                :before-upload="beforeAvatarUpload3">
                                <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                              </el-upload>
                          </div>
                      </el-form-item>
                  </el-form>
                  <el-button type="primary" style="margin-top: 10px;margin-left: 43%;" @click="submit()">提交</el-button>
                  <el-button type="info" style="margin-top: 10px;" @click="reset()">重置</el-button>
              </el-card>  
            </div>
          </el-tab-pane>
        </el-tabs> 
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                imageUrl1:undefined,
                imageUrl2:undefined,
                imageUrl3:undefined,
                file1:undefined,
                file2:undefined,
                file3:undefined,
                carForm:{
                    number:'',
                    age:'',
                    carLength:'',
                    load:'',
                    type:'',
                    engineNo:'',
                    people:'',
                    creationTime:''
                }
            }
        },
        methods:{
            requestUpload() {
            },
            reset() {
                this.carForm = {
                    number:'',
                    age:'',
                    carLength:'',
                    load:'',
                    type:'',
                    engineNo:'',
                    people:'',
                    creationTime:''
                };
                this.imageUrl1 = undefined;
                this.imageUrl2 = undefined;
                this.imageUrl3 = undefined;
                this.file1 = undefined;
                this.file2 = undefined;
                this.file3 = undefined;
            },
            beforeAvatarUpload1(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl1 = reader.result
                    }
                    this.file1 = file
                }
            },
            beforeAvatarUpload2(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl2 = reader.result
                    }
                    this.file2 = file
                }
            },
            beforeAvatarUpload3(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.imageUrl3 = reader.result
                    }
                    this.file3 = file
                }
            },
            submit() {
                let formData = new FormData();
                formData.append("file1", this.file1);
                formData.append("file2", this.file2);
                formData.append("file3", this.file3);
                formData.append("car", JSON.stringify(this.carForm));
                axios({
                    url: "http://localhost:9090/car/registerCar",
                    method: "POST",
                    data: formData,
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                          message: '车辆注册成功',
                          type: 'success'
                        });
                        this.carForm = {
                            number:'',
                            age:'',
                            carLength:'',
                            load:'',
                            type:'',
                            engineNo:'',
                            people:'',
                            creationTime:''
                        };
                        this.imageUrl1 = undefined;
                        this.imageUrl2 = undefined;
                        this.imageUrl3 = undefined;
                        this.file1 = undefined;
                        this.file2 = undefined;
                        this.file3 = undefined;
                    } else {
                        this.$message.error('车辆注册失败');
                    }
                })
                .catch((e) => {
                    console.log(e.response.data.error.message)
                });
            }
        }
    }
</script>

<style scoped>
    .app-container {
      padding: 10px;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
